// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.contest-judge-entry {
  &__button {
    display: flex;
    justify-content: flex-end;
    text-transform: lowercase;
  }

  &__categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
  }

  &__category {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  &__label {
    display: flex;
    gap: 5px;
    font-size: @font-size--normal;
    font-weight: bold;
  }

  &__slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;

    &::-webkit-slider-runnable-track {
      background: hsla(var(--hsl-pink-1), 50%);
      height: 8px;
      border-radius: @border-radius-base;
    }

    &::-moz-range-track {
      background: hsla(var(--hsl-pink-1), 50%);
      height: 8px;
      border-radius: @border-radius-base;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      margin-top: -4px; // initially slightly misaligned
      background-color: hsl(var(--hsl-pink-1));
      width: 16px;
      height: 16px;
      border-radius: 9999px;
    }

    &::-moz-range-thumb {
      border: none;
      border-radius: 9999px;
      background-color: hsl(var(--hsl-pink-1));
      width: 16px;
      height: 16px;
    }
  }

  &__title {
    margin-bottom: 10px;
    font-size: @font-size--large;
    font-weight: bold;
    color: hsl(var(--hsl-l1));
  }

  &__value {
    display: flex;
    justify-content: flex-end;
    color: hsl(var(--hsl-c2));
    font-size: @font-size--title-small;
  }

  &__voted-icon {
    margin-right: 5px;
    color: hsl(var(--hsl-lime-1));
  }
}
